<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<!-- Ne pas oublier cette ligne sinon tous les tags de la JSTL seront ignorés ! -->
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  <head>
    <title>Jeux vidéos</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <%@include file="include.jsp" %>

  </head>
<body>

  <div id="container">
      <!-- Menu Supérieur -->
       <%@include file="header.jsp" %>
      <!-- Fin Header -->
      <!-- Debut Colonne Gauche -->
      <div id="gauche">
         <%@include file="gauche.jsp" %>
      </div>
      <!-- Fin Colonne Gauche -->

      <!-- Debut Colonne Droite -->
      <div id="centre">
          
          <div id="block_produit">
          <c:choose>
            <c:when test='${aucunProduit == false}'>
                <div id="photos" >
                 <c:if test='${nbPhotos == 1}'>   
                 <img id="photo_unique" src="${produitConsulte.getPhotoPrincipal().getUrl()}" />
                 
                 </c:if>
                 <c:if test='${nbPhotos > 1}'>
                     <ul id="thumbs"> 
                     <c:forEach var="u" items="${photosProduit}">
                     <li> 
                        <a href="${u.getUrl()}"> 
                         <img src="${u.getUrl()}" />
                        </a> 
                     </li> 
                     </c:forEach>
                     <li>
                         <img src="${produitConsulte.getCategorieAge().getUrlPhoto()}" alt="Categorie age" />
                     </li>
                    </ul>
                    
                 </c:if>
                </div>
                <div id="right_column_infos">
                    <h1>${produitConsulte.getCategorieProduit().getNom()} : ${produitConsulte.getNom()}</h1> <!-- Ajouter les tags -->
                    <h2>
                    <c:if test='${produitConsulte.hasTags()}'>
                    <img src="images/tag.png" alt="Tag" /><c:forEach var="t" items="${produitConsulte.getTags()}">   
                        <a href="Recherche?action=rechercheParTag&tag=${t.getTag()}" title="rechercher les produits taggués ${t.getTag()}">${t.getTag()}</a>
                    </c:forEach>
                    </c:if>
                    </h2>
                    <br/>
                    <span class="desc"><c:out value="${fn:substring(produitConsulte.getDescription(),0,200)}" ></c:out>... </span>
                    <br/><br/>
                    <span class="big_price">${produitConsulte.prix} &euro;</span>
                    <br/><br/>
                    <c:if test='${UserIsConnected}'>
                        <div id="ajoutPanier" class="ajouterPanier"><a href="PanierServlet?action=ajouterProduit&id=${produitConsulte.getId()}" >Ajouter au panier</a></div>
                            <span id="idProduit">${produitConsulte.getId()}</span>
                    </c:if>
                    <c:if test='${!UserIsConnected}'>
                        <span class="is_connect"><a href="PanierServlet?action=ajouterProduit&nom=${nomCategorie}&id=${produitConsulte.getId()}" >Ajouter au panier</a></span>
                        <span class="have_to_connect"> Ajouter au panier</span>
                    </c:if>
                </div>
                
                <br class="clear"/>
                
               <div id="accordion">
                <div>
                    <h3><img src="images/description.png" width="16px" height="16px" /> <a href="#">Description du produit</a></h3>
                    <div>
                            <p>${produitConsulte.getDescription()}</p>
                    </div>
                </div>
                <c:if test='${produitConsulte.hasVideos()}'>
                <div>
                    <h3><img src="images/videos.png" width="16px" height="16px" /> <a href="#">Vidéos disponibles</a></h3>
                    <div> 
                        <p>
                    <c:forEach var="v" items="${produitConsulte.getVideos()}">
                     
			<object style=""><param name="movie" value="${v.getUrl()}">
                           <param name="allowFullScreen" value="true">
                           <param name="allowScriptAccess" value="always">
                           <embed src="${v.getUrl()}" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="350" height="250"></object>
                     </c:forEach>
                            </p>
                        </div>
                </div>
                </c:if>
                <c:if test='${UserIsConnected}'>
                <div>
                    <h3><img src="images/commentaires.png" width="16px" height="16px" /> <a href="#">Commentaires</a></h3>
                    <!-- liste des commentaires -->
                    <div id="contenuAjoutCommentaire">
                        <c:if test='${hasCommentaires == true}'>
                            <c:forEach var="v" items="${commentaires}">
                                <span class="nomAuteurCommentaire">${v.getUtilisateur().getNom()}</span> a commenté : <br/>
                                ${v.getCommentaire()}
                                <hr/>
                            </c:forEach>
                        </c:if>
                        <span id="montrerFormAjoutCommentaire">Ajouter un commentaire </span>
                        <span><form action="Produits" method="post" id="formAjouterCommentaire" name="formAjouterCommentaire" >
                            Votre commentaire<br/><textarea id="commentaire" name="commentaire"></textarea><br/>
                            <input name="action" type="hidden" value="ajouterCommentaire" />
                            <input name="id" type="hidden" value="${produitConsulte.getId()}" />
                            <input name="idUser" type="hidden" value="${UserId}" />
                            <input class="submit" type="submit" value="Valider" id="ajouterCommentaire" />
                        </form></span>
                           
                    </div>
                </div>
                 </c:if>
                <c:if test='${produitConsulte.existsAutresCategories()}'>
                <div>
                    <h3><img src="images/autresCategories.png" width="16px" height="16px" /> <a href="#">Autres catégories</a></h3>
                    <div>
                            <p>
                                <c:forEach var="p" items="${produitsLies}">
                                    <span class="produitAutreCategorie" >  ${p.getCategorieProduit().getNom()}
                                            <br/>
                                            <a href="Produits?action=voirProduit&id=${p.getId()}" title="$[p.getNom()}" ><img width="100px" height="100px" src="${p.getPhotoPrincipal().getUrl()}" /></a>
                                    </span>
                                </c:forEach>
                            </p>
                    </div>
                </div>
                </c:if>
            </div>

                    
           
                        
                    </div>
            
            </c:when>
            <c:otherwise>
                <span class='error'>Le produit que vous souhaitez consulter n'existe plus.</span>
            </c:otherwise>
          </c:choose>    
          <br/><br/>
      <br class="clear" />
      
              
              
          </div>    
      </div>
    

      <!-- Début Footer -->
      <div id="footer">
      </div>
      <!-- Fin Footer -->
  </div>
  <!-- Fin du Conteneur de la Page -->
</body>
</html>
